<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
import { getGoodsList } from '@/api/goods'
import { useRouter} from 'vue-router'
// router = useRouter()意思是：在setup中获取到router对象
// route = useRoute()意思是：在setup中获取到route对象.route对象中包含了当前路由的路径、参数等信息

const router = useRouter()
// 定义图标属性
const size = 16
const color = '#666'
// const goodItems = [
//   {
//     id:1,
//     img: '/uploads/goods1.png',
//     name: 'KN95级莫兰迪色防护口罩',
//     price: '799.00'
//   },
//   {
//     id:2,
//     img: '/uploads/goods2.png',
//     name: 'KN95级莫兰迪色防护口罩',
//     price: '799.00'
//   },
//   {
//     id:3,
//     img: '/uploads/goods3.png',
//     name: 'KN95级莫兰迪色防护口罩',
//     price: '799.00'
//   },
//   {
//     id:4,
//     img: '/uploads/goods4.png',
//     name: 'KN95级莫兰迪色防护口罩',
//     price: '799.00'
//   }
// ]

// 商品数据
const goodItems = ref([])
const loading = ref(true)
// 获取商品数据
const loadGoods = async ()=>{
  try{
    loading.value=true
    const res = await getGoodsList()
    goodItems.value = res.map(item =>({
      id: item.id,
      img: item.image_url,  // 后端字段名正确
      name: item.title,
      price: item.price,
      subtitle: item.subtitle
    }))
  }catch(error){
    console.error('获取商品失败:', error)
  }finally{
    loading.value=false
  }
}

const goToDetail = (id) => {
  router.push(`/goods/${id}`)
}
// 组件挂载时候加载数据
onMounted(()=>{
  loadGoods()
})
</script>
<template>
  <div class="goods wrapper">
    <div class="title">
      <div class="left">
        <slot name="title">
          <h3>新鲜好物</h3>
        </slot>
        <slot name="desc">
          <p>
          新鲜出炉，品质靠谱！
          </p>
        </slot>
      </div>

      <div class="right">
        <a href="#" class="more">
          查看全部
          <el-icon :size="size" :color="color" class="icon-right">
            <ArrowRight />
          </el-icon>
        </a>
      </div>
    </div>
    <div class="bd">
      <ul>
        <li v-for="item in goodItems" :key="item.id">
          <div class="img" @click="goToDetail(item.id)" style="cursor: pointer;">
            <img :src="item.img" :alt="item.name" @error="$event.target.src='/placeholder.png'">
          </div>
          <div class="name">
            {{item.name}}
          </div>
          <div class="price">
            <span class="symbol">¥</span>{{item.price}}
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.bd ul{
  display: flex;
  justify-content: space-between;
  li{
    width: 304px;
    height: 404px;
    background-color: #EEF9F4;
    text-align: center;
    transition: all 0.3s;
    img{
      width: 304px;
      height: 304px;
    }
    .name{
      margin-top: 18px;
      text-align: center;
      font-size: 22px;
      color: #A1A1A1;
    }
    .price{
      margin-top: 10px;
      color: #AA2113;
      font-size: 18px;
    }
    .symbol{
      margin-right: 3px;
      font-size: 14px;
    }
  }
  li:hover{
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
  }
}

</style>
